<template>
	<view>
    <!-- <my-search @tap="showHeaderPop"></my-search> -->
   <view class="my-search-container" >
      <view @click="backclick" v-if="flag">
        <uni-icons type="arrow-left" size="30" color="#FFFFFF"></uni-icons>
      </view>
       <view class="my-search-item">
         
         <view class="my-search-box"  @click="onclick">
            <uni-search-bar :radius="100" focus="true" cancelButton="none" @confirm="search" @input="input" ></uni-search-bar>
         </view>
         
         <view @tap="showHeaderPop" > 
            <image src="../../static/icon/choose.png" class="icon-img"></image>
         </view>
    
       </view>
       
       
      <view class="pop" v-show="isShowHeader" @touchmove.stop.prevent='' >
          <view class="pop-mask" @tap="hideHeaderPop"></view>
          <view class="pop-box" :animation="animationData">
                <indexDetail></indexDetail>
           </view>
       </view>
       
      </view>
        
      <view v-if="flag">
          
        <view v-if="kw.length>0">
          <yewu></yewu>
        </view>
          
          <!-- 搜索历史 -->
          <view class="history-box" v-else>
              <!-- 标题区域 -->
              <view class="history-title">
                  <text>搜索历史</text>
                  <uni-icons type="trash" size="25" @click="clearHistotry"></uni-icons>
              </view>
              <!-- 列表区域 -->
              <view class="history-list">
                  <uni-tag :text="item" v-for="(item,i) in histories" :key="i" @click="gotoDetail(item)"></uni-tag>
              </view>
          </view>
         
          
      </view>
      
     <!-- <template v-else> -->
      <!-- ---------------------------------------------------- -->
        <view class="box" v-else> 
        
          <view class="box1">     
             
              <view class="radius1" :style="active==true?'border: 2rpx solid red;':''  " v-for="(item,index) in list" :key="index" @tap="indexDetail(index)">
                <image :src="item.imgUrl" class="img"></image>
                 <view class="small-del"></view>
                <view class="text" >
                  <text>{{item.name}}</text>
                </view>   
              </view>
           
          <!-- 新增 -->
              <view class="AddDel">
                <view class="add">
                    <image src="../../static/images/加号.png" class="img"  @tap="showPop"></image>
                    <view class="text">
                      新增
                    </view> 
                </view>
                <!-- :class="active==false?'img':'active-img' -->
                <view class="del" :style=" active==true? 'border: 2rpx solid red;' : '' ">
                    <image :src="active==false?'../../static/images/del.png':'../../static/images/del-active.png' " class="img"  @tap="showDel"></image>
                    <view class="text" >
                      删除
                    </view>   
                </view>
              </view>
              
              <!-- 底部弹出层 -->
                 <view class="pop" v-show="isShow" @touchmove.stop.prevent=''>
                     <!-- 蒙层 -->
                     <view class="pop-mask" @tap="hidePop"></view>
                     <!-- 内容 -->
                    <view class="pop-box" :animation="animationData">

                        <view class="pop-logo" v-for="(item,index) in list1" :key="index" @tap="addLogo(index)">
                            <image :src="item.imgUrl" class="img" ></image>
                            <view class="text" >
                              <text>{{item.name}}</text>
                            </view>   
                        </view>

                     </view>  
                 </view> 
                 
                 
          </view>
      </view>
      
    <!-- </template> -->
	</view>
</template>

<script>
  import indexDetail from '../../components/index/indexdetail.vue'
  import yewu from '../../components/index/yewu.vue'
  
	export default {
    components:{
        indexDetail,
        yewu
    },
		data() {
			return {
        isShowHeader:false,
        active:false,
        animationData:{},
        isShow:false,
        timer:null,
        kw:'',
        historyList:[],
        //搜索的结果列表
        searchResults:[],
        flag:false,
        listArr: ['办公综合业务','专卖管理','法规管理','财务管理','人事管理','党建管理','工会管理','纪检监察'],
        list:[
          {
            id:1,
            name:'办公综合业务',
            imgUrl:"../../static/images/c0.png"
          },
          {
            id:2,
            name:'专卖管理',
            imgUrl:"../../static/images/c1.png"
          
          },
          {
            id:3,
            name:'法规管理',
            imgUrl:"../../static/images/c2.png"
          },
          {
            id:4,
            name:'财务管理',
            imgUrl:"../../static/images/c3.png"
          },
          {
            id:5,
            name:'人事管理',
            imgUrl:"../../static/images/c4.png"
          },
          {
            id:6,
            name:'党建管理',
            imgUrl:"../../static/images/c5.png"
          },
          {
            id:7,
            name:'工会管理',
            imgUrl:"../../static/images/c6.png"
          },
          {
            id:8,
            name:'纪检监察',
            imgUrl:"../../static/images/c7.png"
          }
        ],
        list1:[
          {
            id:1,
            name:'办公综合业务',
            imgUrl:"../../static/images/c0.png"
          },
          {
            id:2,
            name:'专卖管理',
            imgUrl:"../../static/images/c1.png"
          
          },
          {
            id:3,
            name:'法规管理',
            imgUrl:"../../static/images/c2.png"
          },
          {
            id:4,
            name:'财务管理',
            imgUrl:"../../static/images/c3.png"
          },
          {
            id:5,
            name:'人事管理',
            imgUrl:"../../static/images/c4.png"
          },
          {
            id:6,
            name:'党建管理',
            imgUrl:"../../static/images/c5.png"
          },
          {
            id:7,
            name:'工会管理',
            imgUrl:"../../static/images/c6.png"
          },
          {
            id:8,
            name:'纪检监察',
            imgUrl:"../../static/images/c7.png"
          }
        ]
       
        
			}
		},
      
    computed:{
        histories(){
            return [...this.historyList].reverse()
        }
    },
    onLoad() {
       this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')
    },
		methods: {
      onclick(){
          this.flag = true
      },
      backclick(){
          this.flag = false
      },
      //input输入事件
      input(e){
          // console.log(e);
        clearTimeout(this.timer)
        this.timer = setTimeout(()=>{
             // console.log(e);
             this.kw = e
             this.getSearchList()
        },500)
        
      },
      gotoDetail(kw){
          uni.navigateTo({
            url:"/pages/listdetails2/listdetails2?query="+kw
          })
      },
      getSearchList(){
         //判断搜索关键词是否为空
         if(this.kw.length === 0 ){
           return
         }         
        this.saveSearchHistory()
         // const{ data: res } = await uni.$http.get("/api/public/v1/goods/qsearch",{ query:this.kw })
         // if(res.meta.status !== 200 ) return uni.$showMsg()
         
         const set = new Set(this.historyList)
         set.delete(this.kw)
         set.add(this.kw)
         this.historyList = Array.from(set)
         //对搜索历史数据进行持久化存储
         uni.setStorageSync('kw',JSON.stringify(this.historyList))
     
      },     
      indexDetail(id){
        
          uni.navigateTo({
            url:"/pages/listdetails/listdetails?id="+id+""
          })
        
      
      },
      //插入历史数据
      saveSearchHistory(){
          this.historyList.push(this.kw)
          
      },
      //清除历史记录
      clearHistotry(){
        this.historyList=[]
        uni.setStorageSync('kw','[]')
      },
      toSearchList(){
        uni.navigateTo({
          url:"/subpkg/yancao/yancao"
        })
      },
      showHeaderPop(){
        console.log(12);
        var animation = uni.createAnimation({        
          duration: 200               
        })
        animation.translateY(600).step();
        this.animationData = animation.export();
        this.isShowHeader = true;
        setTimeout(()=>{
            animation.translateY(0).step();
            this.animationData = animation.export();
        },200)
      },
      showPop(){
        console.log(12);
        var animation = uni.createAnimation({        
          duration: 200               
        })
        animation.translateY(600).step();
        this.animationData = animation.export();
        this.isShow = true;
        setTimeout(()=>{
            animation.translateY(0).step();
            this.animationData = animation.export();
        },200)
      },
      hideHeaderPop(){
        var animation = uni.createAnimation({
          duration: 200               
        })
        animation.translateY(600).step();
        this.animationData = animation.export();
        this.isShowHeader = true;
        
        setTimeout(()=>{
            animation.translateY(0).step();
            this.isShowHeader = false;
            
        },200)
      },
      hidePop(){
        
        var animation = uni.createAnimation({
          duration: 200               
        })
        animation.translateY(600).step();
        this.animationData = animation.export();
        this.isShow = true;
        
        setTimeout(()=>{
            animation.translateY(0).step();
            this.isShow = false;
            
        },200)
      },
      addLogo(id){
        let logo = this.list1[id]
        this.list.push(logo)
        
        console.log(id);
        //隐藏弹出框
        this.hidePop();
        //提示信息
        uni.showToast({
          title:"成功把图标加入首页",
          icon:"none"
        })
      },
      showDel(){
        this.active=!this.active
      }
      
      
      
		}
	}
</script>

<style lang="scss">
.box{
  width: 750rpx;
  height: 1612rpx;
  background: #E3EEFF;

  .box1{
     display: flex;
     flex-wrap: wrap;
     flex: 1;
     position: relative;
     
    .radius1{
     
      margin-top: 80rpx;
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
      background: #fff;
      margin-left: 30rpx;
      box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
      align-items: center;
      justify-content: center;
      margin-bottom: 120rpx;
      
      .img{
        margin: 25rpx 25rpx;
        width: 100rpx;
        height: 100rpx;
      }
     .text{
        font-size: 16px;
        // margin-top:60rpx;
        padding: 10rpx;
        text-align: center;
      }      
    }
  
    
    
    .AddDel{
      // margin-top: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .add{
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
        background: #fff;
        margin-left: 30rpx;
        text-align: center;
      }
      .del{
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
        background: #fff;
        margin-left: 30rpx;
        text-align: center;
      }
      .img{
        margin: 25rpx 25rpx;
        width: 100rpx;
        height: 100rpx;
      }
     
    }
    
    
    .pop{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      
      .pop-mask{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.3);
      }
      
      .pop-box{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 400px;
        background-color: #FFFFFF;
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        .pop-logo{
          margin-top: 20rpx;
          width: 150rpx;
          height: 150rpx;
          border-radius: 50%;
          background: #fff;
          margin-left: 30rpx;
          box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
          align-items: center;
          justify-content: center;     
          .img{
            margin: 25rpx 25rpx;
            width: 100rpx;
            height: 100rpx;
          }
         .text{
            font-size: 16px;       
            text-align: center;
          }      
         
        }
      }    
    }
 
  }

}


.my-search-container{
  background-color: #405BDE;
  position: sticky;
  z-index: 9999;
  top:0;
}

.my-search-item{
  display: flex;
  
}
.my-search-box{
  // display: flex;
  // margin-left: 30rpx;
  // margin-bottom: 20rpx;
  width: 660rpx;
  // height: 70rpx;
  // background-color: #FFFFFF;
  // border-radius: 20px;
  // .icon{
  //   margin-left: 10rpx;
  //   margin-top: 15rpx;
  // }
}
.icon-img{
  width: 60rpx;
  height: 60rpx;
  margin-top: 25rpx;
  // margin-left: 20rpx;
}




.pop{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.pop-mask{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1100rpx;
  background-color: rgba(0,0,0,0.3);
}

.pop-box{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1100rpx;
  background-color: #FFFFFF;
}

.pop-img{
  width: 260rpx;
  height: 260rpx;
}

.pop-num{
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
}

.pop-sub{
  line-height: 80rpx;
  background-color: #49BDFB;
  color: #FFFFFF;
  text-align: center;
}


.history-box{
  padding: 0 5px;
  .history-title{
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;
    font-size: 15px;
    border-bottom: 1px solid #efefef;
  }
  .history-list{
    display: flex;
    flex-wrap: wrap;
    .uni-tag{
      margin-top: 5px;
      margin-right: 5px;
    }
  }
}














</style>
